<template>
	<view class="content">
		<view class="header">
			<view class="hello">Hello!</view>
			<view class="name">拾玖造型 19 Hair Salon！</view>
			<view class="addrsss">
				<view>
					<view class="type" v-for="(item,index) in headerList" :key="index">
						<img :src="item.img" />
						<view>{{item.text}}</view>
					</view>
				</view>
				<view class="phone">
					<img src="/static/img/common_icon/phone.png" />
				</view>
			</view>
			<swiper class="header_bannner" indicator-dots="true" autoplay="true" indicator-active-color="#fff" interval="5000"
			 duration="1000" circular="true">
				<block v-for="(item,index) in bnrUrl" :key="index">
					<swiper-item>
						<img :src="item.url" mode="aspectFill" />
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="coupon">
			<p class="name">优惠券</p>
			<p class="name_english">Coupon</p>
			<view class="couponList">
				<view v-for="(item,index) in couponList" :key="index">
					<view class="rmb">RMB</view>
					<view class="coupon_number">{{item.q}}</view>
					<view class="text">满{{item.all}}减{{item.q}}</view>
					<view class="button">立即领取</view>
				</view>
			</view>
		</view>
		<view class="serviceList">
			<view class="navList">
				<view @click="changNavIndex(index)" :class="navIndex==index?'border_bottom active':''" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<view class="services">
				<view class="one_service" v-for="(item,index) in services" :key="index">
					<view>
						<img :src="item.img" />
					</view>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="text">{{item.text}}</view>
						<view class="bottom">
							<view class="price">
								￥{{item.price}}
								<view class="s">￥{{item.price1}}</view>
							</view>
							<view class="service_num">
								<view>已服务{{item.num}}</view>
								<view><img src="../../static/img/common_icon/next.png" /></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bnrUrl: [{
						url: "../../static/img/index_banner_1.png"
					},
					{
						url: "../../static/img/index_banner_1.png"
					},
					{
						url: "../../static/img/index_banner_1.png"
					}
				],
				headerList: [{
						img: "../../static/img/common_icon/time.png",
						text: "8:30-21:30"
					},
					{
						img: "../../static/img/common_icon/floor.png",
						text: "天河区海乐东路12号合景·睿峰31层3106"
					},
					{
						img: "../../static/img/common_icon/address.png",
						text: "店铺距离您 100M"
					}
				],
				couponList: [{
						all: 30,
						q: 5
					},
					{
						all: 30,
						q: 5
					},
					{
						all: 30,
						q: 5
					}
				],
				navIndex: 0,
				navList: [{
						name: "推荐"
					},
					{
						name: "洗发"
					},
					{
						name: "理发"
					},
					{
						name: "烫发"
					},
					{
						name: "洗剪吹"
					}
				],
				services: [{
						img: "../../static/img/index_service.png",
						name: "烫发",
						text: "服务简介服务简介服务简介服务简介服务简介服务简介",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						text: "服务简介服务简介服务简介服务简介服务简介服务简介",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						text: "服务简介服务简介服务简介服务简介服务简介服务简介",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						text: "服务简介服务简介服务简介服务简介服务简介服务简介",
						price: 269,
						price1: 739,
						num: 100
					}
				]
			};
		},
		onLoad() {},
		methods: {
			changNavIndex(e) {
				this.navIndex = e
			}
		}
	};
</script>

<style>
	.content {}

	.header {
		padding: 20rpx 40rpx 0;
		background-color: #0d6866;
		height: 536rpx;
		border-radius: 0rpx 0rpx 120rpx 120rpx;
		color: #fff;
		position: relative;
		margin-bottom: 112rpx;
	}

	.header .hello {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
	}

	.header .name {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 40rpx;
		margin: 12rpx 0 20rpx;
	}

	.header .addrsss {
		display: flex;
		justify-content: space-between;
	}

	.header .addrsss .type {
		display: flex;
		margin-bottom: 16rpx;
	}

	.header .addrsss .type:last-child {
		margin-bottom: 0;
	}

	.header .addrsss .type img {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.header .addrsss .type view {
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
	}

	.header .addrsss .phone,
	.header .addrsss .phone img {
		width: 140rpx;
		height: 140rpx;
	}

	.header .header_bannner {
		width: 670rpx;
		height: 320rpx;
		background: #f0f0f0;
		border-radius: 35rpx;
		position: absolute;
		bottom: -80rpx;
	}

	.header .header_bannner img {
		width: 100%;
		height: inherit;
		border-radius: 35rpx;
	}

	.coupon {
		margin: 0 40rpx 32rpx;
	}

	.coupon .name {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
		color: #006866;
	}

	.coupon .name_english {
		font-size: 20rpx;
		font-weight: bold;
		line-height: 22rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}

	.couponList {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.couponList>view {
		width: 169rpx;
		height: 252rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		color: #ffffff;
		background-color: #0d6866;
	}

	.couponList>view view,
	.couponList>view button {
		text-align: center;
	}

	.couponList>view .rmb {
		font-size: 20rpx;
		font-weight: bold;
		line-height: 22rpx;
	}

	.couponList>view .coupon_number {
		font-size: 80rpx;
		font-weight: bold;
		line-height: 94rpx;
		text-shadow: 0rpx 6rpx 4rpx rgba(0, 0, 0, 0.18);
		margin: 20rpx 0;
	}

	.couponList>view .text {
		font-size: 24rpx;
		font-weight: 500;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}

	.couponList>view .button {
		width: 112rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: rgba(13, 104, 102, 1);
		margin: 0 auto;
	}

	.serviceList {
		width: 670rpx;
		margin: 0 40rpx;
	}

	.serviceList .navList {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
	.services {
		margin-bottom: 24rpx;
	}

	.one_service {
		width: 608rpx;
		height: 160rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 6rpx rgba(0, 0, 0, 0.06);
		border-radius: 40rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.one_service img {
		width: 160rpx;
		height: 160rpx;
	}

	.one_service .right {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 32rpx;
	}

	.one_service .right .name {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: rgba(51, 51, 51, 1);
	}

	.one_service .right .text {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(153, 153, 153, 1);
	}

	.one_service .right .bottom {
		display: flex;
		justify-content: space-between;

	}

	.one_service .right .price {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 38rpx;
		color: rgba(229, 109, 34, 1);
	}

	.one_service .right .price .s {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: rgba(102, 102, 102, 1);
		text-decoration: line-through;
		display: inline-block;
	}

	.one_service .right .service_num {
		display: flex;
		justify-content: space-between;
		width: 142rpx;
		height: 28rpx;
		background: rgba(13, 104, 102, 1);
		border-radius: 20rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		padding: 6rpx 4rpx 6rpx 14rpx;
	}

	.one_service .right .service_num img {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #fff;
	}
</style>
